import React from 'react';
import { Form, Input, DatePicker, Button, Select, Table, TreeSelect } from 'antd';
import moment from 'moment';
import { connect } from 'dva';

const { Item } = Form;
const { Option } = Select;
const { RangePicker } = DatePicker;

class SearchForm extends React.PureComponent {
	constructor() {
		super();
		this.state = {
			selectedRowKeys: [],
			page: null,
			plate: null,
			start: null,
			end: null,
		};
	}
	onSubmit = e => {
		e.preventDefault();
		const _this = this;
		const {
			form,
			format,
			dispatch,
			getList,
			search: { pageSize, pageNum },
			constructionSearch,
			convenienceSearch,
			eventSearch,
		} = _this.props;
		const { page } = _this.state;
		const pathname = window.location.pathname;
		form.validateFields((err, values) => {
			if (!err) {
				let startDate =
					(values.date && values.date[0].format(format || 'YYYY-MM-DD')) || '';
				let endDate = (values.date && values.date[1].format(format || 'YYYY-MM-DD')) || '';
				const name = values.name || '';
				pathname === '/graphic' &&
					dispatch({
						type: 'graphic/save',
						payload: {
							search: {
								startDate,
								endDate,
								plateName: values.plateName || '',
								pageSize: 10,
								pageNum: 1,
								name,
							},
						},
					}) &&
					getList();
				pathname === '/data/construction' &&
					dispatch({
						type: 'data/save',
						payload: {
							constructionSearch: {
								pageSize: 10,
								pageNum: 1,
								startDate,
								endDate,
							},
						},
					}) &&
					getList();
				pathname === '/data/convenience' &&
					dispatch({
						type: 'data/save',
						payload: {
							convenienceSearch: {
								pageSize: 10,
								pageNum: 1,
								name,
								startDate,
								endDate,
							},
						},
					}) &&
					getList();
				pathname === '/data/events' &&
					dispatch({
						type: 'data/save',
						payload: {
							eventSearch: {
								pageSize: 10,
								pageNum: 1,
								startDate,
								endDate,
							},
						},
					}) &&
					_this.props.getList();
				// console.log(start, end)
			}
		});
	};
	pageChange = pageNum => {
		const { start, end, plate } = this.state;
		const {
			getList,
			search,
			constructionSearch,
			convenienceSearch,
			eventSearch,
			dispatch,
		} = this.props;
		const { pathname } = window.location;
		pathname === '/graphic' &&
			dispatch({
				type: 'graphic/save',
				payload: {
					search: {
						pageNum,
						startDate: search.startDate,
						endDate: search.endDate,
						plateName: search.plateName,
						pageSize: search.pageSize,
						name: search.name,
					},
				},
			}) &&
			getList();
		pathname === '/data/construction' &&
			dispatch({
				type: 'graphic/save',
				payload: {
					constructionSearch: {
						pageNum,
						startDate: constructionSearch.startDate,
						endDate: constructionSearch.endDate,
						pageSize: constructionSearch.pageSize,
					},
				},
			}) &&
			getList(page, start, end);
		pathname === '/data/convenience' &&
			dispatch({
				type: 'data/save',
				payload: {
					convenienceSearch: {
						pageNum,
						pageSize: convenienceSearch.pageSize,
						name: convenienceSearch.name,
						startDate: convenienceSearch.startDate,
						endDate: convenienceSearch.endDate,
					},
				},
			}) &&
			getList();
		pathname === '/data/events' &&
			dispatch({
				type: 'data/save',
				payload: {
					eventSearch: {
						pageNum,
						startDate: eventSearch.startDate,
						endDate: eventSearch.endDate,
						pageSize: eventSearch.pageSize,
					},
				},
			}) &&
			getList();
	};
	selectChange = (selectedRowKeys, selectedRows) => {
		this.setState({
			selectedRowKeys,
		});
	};
	delete = () => {
		const { selectedRowKeys } = this.state;
		this.props.delete(selectedRowKeys);
		this.setState({
			selectedRowKeys: [],
		});
	};
	onPanelChange = (value, mode) => {
		this.setState({
			value,
		});
	};
	clear = () => {
		const { form, dispatch, getList } = this.props;
		form.resetFields();
		const { pathname } = window.location;
		pathname === '/graphic' &&
			dispatch({
				type: 'graphic/save',
				payload: {
					search: {
						plateName: '',
						startDate: '',
						endDate: '',
						pageNum: 1,
						pageSize: 10,
						name: '',
					},
				},
			}) &&
			getList();
		pathname === '/data/construction' &&
			dispatch({
				type: 'data/save',
				payload: {
					constructionSearch: { startDate: '', endDate: '', pageNum: 1, pageSize: 10 },
				},
			}) &&
			getList();
		pathname === '/data/convenience' &&
			dispatch({
				type: 'data/save',
				payload: {
					convenienceSearch: {
						pageNum: 1,
						pageSize: 10,
						name: '',
						startDate: '',
						endDate: '',
					},
				},
			}) &&
			getList();
		pathname === '/data/events' &&
			dispatch({
				type: 'data/save',
				payload: { eventSearch: { startDate: '', endDate: '', pageNum: 1, pageSize: 10 } },
			}) &&
			getList();
	};
	render() {
		const {
			form: { getFieldDecorator },
			columns,
			dataSource,
			x,
			sector,
			pageSize,
			pageNum,
			total,
			components,
			loading,
			keyword,
			plate,
			plateData,
			format,
			rowKey,
		} = this.props;
		const { selectedRowKeys, value } = this.state;
		return (
			<React.Fragment>
				<Form layout="inline" onSubmit={this.onSubmit}>
					{keyword && (
						<Item label="关键词">
							{getFieldDecorator('name', {})(<Input placeholder="请输入..." />)}
						</Item>
					)}
					{plate && (
						<Item label="板块">
							{getFieldDecorator('plateName', {})(
								<TreeSelect
									style={{ width: 300 }}
									treeData={plateData}
									dropdownStyle={{ maxHeight: 600, overflow: 'auto' }}
									placeholder="请选择板块..."
								/>
							)}
						</Item>
					)}
					<Item label="日期">
						{getFieldDecorator('date', {
							initialValue: format && value,
						})(
							<RangePicker
								style={{ width: 300 }}
								format={format || 'YYYY-MM-DD'}
								mode={format ? ['month', 'month'] : ['date', 'date']}
								onPanelChange={format && this.onPanelChange}
								allowClear={false}
							/>
						)}
					</Item>
					<Item>
						<Button htmlType="submit" type="primary" style={{ marginRight: 10 }}>
							搜索
						</Button>
						<Button onClick={this.clear} type="danger">
							清空
						</Button>
					</Item>
				</Form>
				<div style={{ margin: '20px 0' }}>
					{this.props.children}
					{selectedRowKeys.length > 0 && (
						<Button type="danger" style={{ margin: '0 10px' }} onClick={this.delete}>
							删除
						</Button>
					)}
				</div>
				<Table
					components={components}
					columns={columns}
					dataSource={dataSource}
					scroll={{ x }}
					rowKey={rowKey || 'id'}
					pagination={{ pageSize, pageNum, total, onChange: this.pageChange }}
					rowSelection={
						window.location.pathname.split('/')[2] !== 'events'
							? { selectedRowKeys, onChange: this.selectChange }
							: null
					}
					loading={loading}
				/>
			</React.Fragment>
		);
	}
}

export default Form.create()(
	connect(state => ({
		search: state.graphic.search,
		constructionSearch: state.data.constructionSearch,
		convenienceSearch: state.data.convenienceSearch,
		eventSearch: state.data.eventSearch,
	}))(SearchForm)
);
